<template>
  <div class="login-modal">
    <div class="login-box">
      <div class="login-title">
        登录
      </div>
      <NormalForm
        ref="loginForm"
        v-model="loginInfo"
        label-width="70px"
        :form-items="formItems"
      />
    </div>
  </div>
</template>
<script setup lang="jsx">
import NormalForm from '../components/Form/NormalForm.vue';
import {ref} from 'vue'
import { ElInput,ElButton, ElMessage } from 'element-plus';
import  URLS from '@api/api'
import {resultHandle} from '@/common/common'
import http from '@u/request.js'
import { useRouter } from 'vue-router';
const router = useRouter()
const loginForm = ref()

const loginInfo =ref({
    username:'',
    password:''
})

const login =()=>{
    loginForm.value.form.validate(valid=>{
        if(valid){
            http.post(URLS.LOGIN,loginInfo.value).then(res=>{
                resultHandle(res,()=>{
                    ElMessage({type:'success',message:'登录成功'})
                    router.push({name:'doc-manage'})
                },)
            })
        }
    })
}



const formItems = ref([
    {
        label:'用户名',
        prop:'username',
        com:<ElInput/>,
        attrs:{
            placeholder:'请输入随机文字',
        },
        itemAttrs:{
            rules:[{required:true,message:'请输入用户名',trigger:'blur'}]
        }
    },
    {
        label:'密码',
        prop:'password',
        com:<ElInput/>,
        attrs:{
            placeholder:'请输入随机文字',
            type:'password',
        },
        itemAttrs:{
            rules:[{required:true,message:'请输入密码',trigger:'blur'}]
        }

    },
    {
        com:<ElButton onClick={login}>登录</ElButton>,
        attrs:{
            type:'primary',
            style:{width:'100%'}
        },

    }
])

</script>
<style lang="scss" scoped>
.login-modal{
    width: 100vw;
    height: 100vh;
    position: fixed;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    .login-box{
        background-color: #fff;
        width: 300px;
        position: absolute;
        left:50%;
        top: 50%;
        transform: translate(-50%, -50%);

        height: fit-content;
        padding: 24px;
        border-radius: 4px;
        :deep(.el-form-item):last-child{
            margin-bottom: 0;
        }
        .login-title{
            font-size: 32px;
            font-weight: bolder;
            margin-bottom: 24px;
            text-align: center;
        }

    }
}
</style>